import { Form } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import styles from "../BaseComponents/style.less";
import MyTable from '../BaseComponents/MyTable';
import HeaderOptions from '../BaseComponents/HeaderOptions';

const FileManagement = props => {

    const { dispatch, MARK } = props;
    const { MARK:fmark } = props.route;
    const [configs, setConfigs] = useState({ HEADER_OPTS: {}, MODAL_CFGS: {}, DETAIL_ARGS: {}, })

    useEffect(() =>{
        // console.log('==>> end', fmark)
        dispatch && dispatch({ type: 'fileManage/updateMARK', payload: fmark});
    }, [])

    const renderHTML = () => {
        if (MARK == fmark){
            switch (fmark) {
                case "public":

                    break;

                default:
                    return (
                        <>
                            {
                                <HeaderOptions
                                    className={styles}
                                    headerOpts={configs.HEADER_OPTS}
                                    {...props}
                                />
                            }
                            {
                                <MyTable
                                    className={styles.moTable}
                                    MOtableCols={configs.TABLE_COLS}
                                    detailArgs={configs.DETAIL_ARGS}
                                    newFields={configs.NEW_FIELDS}
                                    {...props}
                                />
                            }
                            {/* {
                            <ModalForm
                                modalCfgs={configs.MODAL_CFGS}
                                // onCancel={}
                                {...props}
                            />
                        } */}
                        </>
                    );
            }
        }

        return <></>
    }

    useEffect(() => {
        // console.log('==>> fmark', fmark)
        fmark == MARK &&
            import(`./configs/${fmark}`)
                .then(content => {
                    // console.log('==>> content', content)
                    Object.keys(content).length && setConfigs(content);
                })

    }, [MARK])

    return renderHTML();
}

export default connect(({ fileManage, global }) => ({
    ...fileManage,
    isMobile: global.isMobile,
}))(Form.create()(FileManagement)); 